{extend name='public/base' /}

{block name='content'}
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="table" lay-filter="test"></table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添 加</button>
        <button class="layui-btn layui-btn-sm" lay-event="allDel">删 除</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>删除
    </a>
</script>

<form class="layui-form" id="form1" style="display: none">
    <div style="margin-top: 50px;"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-inline">
            <!--            <input type="text" name="name" lay-verify="required" placeholder="请输入分类名称"-->
            <!--                   autocomplete="off" class="layui-input">-->

            <input type="text" name="name" lay-verify="required" placeholder="请输入分类名称" lay-reqtext="用户名是必填项，岂能为空？"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
</form>
{/block}

<!---->

{block name='js'}
<script>
    layui.use(['table'], function () {
        let $ = layui.$,
            table = layui.table;
        //表格数据
        table.render({
            id: 'testReload',
            elem: '#table',
            toolbar: '#toolbarDemo',
            method: 'post',
            url: '/manage/projects/shop/classify/list',
            title: '分类列表',
            cols: [[
                {type: 'numbers', align: 'center'},
                {type: 'checkbox'},
                {field: 'id', title: 'ID', minWidth: 80, hide: true},
                {field: 'name', title: '名称', minWidth: 120, align: 'center'},
                {field: 'createTime', title: '添加日期', minWidth: 150, align: 'center'},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 150, align: 'center'}
            ]],
            page: true
        });
        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':  //添加
                    addData();
                    break;
                case 'allDel':  //多选删除
                    let data = checkStatus.data;
                    delData(data);
                    break;
            }
        });
        //监听工具条
        table.on('tool(test)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'edit':
                    editData(data);
                    break;
                case 'del':
                    delData([data]);
                    break;
            }
        });

        //添加
        function addData() {
            $('input[name="name"]').val('');
            layer.open({
                type: 1,
                title: '添加分类',
                content: $('#form1'),
                area: ['400px', '260px'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    let name = $('input[name="name"]').val();
                    if (name.length <= 0) {
                        layer.msg('名称不能为空');
                        return false;
                    }
                    $.ajax({
                        'type': 'post',
                        'data': {name: name},
                        'url': '/manage/projects/shop/classify/add',
                        success: function (res) {
                            if (res.code === 0) {
                                layer.close(index);
                                layer.msg('添加成功');
                                table.reload('testReload');
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    });
                },
                btn2: function (index, layero) {

                    layer.close(index);
                }
            });
        }

        function editData(data) {
            $('input[name="name"]').val(data.name);
            layer.open({
                type: 1,
                title: '修改分类',
                content: $('#form1'),
                area: ['400px', '260px'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    let name = $('input[name="name"]').val();
                    if (name.length <= 0) {
                        layer.msg('名称不能为空');
                        return false;
                    }
                    $.ajax({
                        'type': 'post',
                        'data': {id: data.id, name: name},
                        'url': '/manage/projects/shop/classify/update',
                        success: function (res) {
                            if (res.code === 0) {
                                layer.close(index);
                                layer.msg('修改成功');
                                table.reload('testReload');
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    });
                },
                btn2: function (index, layero) {
                    $('input[name="name"]').val('');
                    layer.close(index);
                }
            });
        }

        //删除
        function delData(data) {
            layer.confirm('确定删除这些数据吗？', function (index) {
                $.post('/manage/projects/shop/classify/delete',
                    {data: data},
                    function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功')
                            table.reload('testReload');
                        } else {
                            layer.msg(res.message);
                        }
                    }
                );
            })
        }

    });
</script>
{/block}